<template>
    <div class="permission">
        <ul class="roles-left">
            <div class="title">请选择角色：</div>
            <li :class="currentRole.id === item.id ? 'active' : ''" v-for="(item,index) in allRole" :key="index" @click="changeRole(item)">{{ item.name }}
            </li>
        </ul>
        <div class="permission-right">
            <div class="top">
                <p>当前角色：{{ currentRole.name }}</p>
                <div>
                    <el-button v-has="236" type="primary" plain @click="handle('save')">保存</el-button>
                    <el-button v-if="development" type="success" @click="handle('add')">新增权限菜单</el-button>
                </div>
            </div>
            <div class="content">
                <el-row type="flex" class="row-bg">
                    <el-col :span="5">
                        <div class="title">功能列表</div>
                    </el-col>
                    <el-col :span="19">
                        <div class="title">功能权限</div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-tree
                            v-loading="!loading"
                            element-loading-text="拼命加载中"
                            ref="permission"
                            :data="data"
                            show-checkbox
                            :indent="40"
                            icon-class="el-icon-arrow-right"
                            node-key="id"
                            default-expand-all
                            :expand-on-click-node="false"
                            :check-on-click-node="true"
                            :check-strictly="true"
                            :props="{label: 'name'}"
                            :render-content="renderContent">
                    </el-tree>
                </el-row>
            </div>
        </div>

        <!-- 新增、编辑 -->
        <addPermission
                v-if="dialogParams.visible"
                :dialogParams="dialogParams"
                :menuTree="data"
                @getList="getPermissionTree"></addPermission>
    </div>
</template>

<script>
    import {getPermissionTree, getAllRole, getRolePermission, addRolePermission} from "../../api/systemManage";
    import addPermission from './modules/addPermission';

    export default {
        name: 'permission',
        components: {
            addPermission
        },
        data() {
            return {
                loading: true,
                menuIds: [],
                buttonIds: [],
                // 选中的功能权限id
                selectArr: [],
                handleArr: [],
                // 选中的菜单功能权限ids
                rolePermissionArr: [],
                // 当前角色
                currentRole: {
                    id: '',
                    name: ''
                },
                checkList: [],
                checkAll: false,
                checked: false,
                isIndeterminate: true,
                allRole: [],
                data: [],
                // 新增、编辑、查询资源相关参数
                dialogParams: {
                    visible: false,
                    id: '',
                    title: '',
                    type: ''
                },
                development: false
            }
        },
        created() {
            this.getPermissionTree();
            this.getRole();
        },
        mounted() {
            // console.log(process.env);
            this.development = process.env.NODE_ENV === 'development'
            // 回显权限
            // this.$refs.permission.setCheckedKeys(this.selectArr);
        },
        methods: {
            // 获取所有角色
            getRole() {
                getAllRole().then(res => {
                    this.allRole = res || [];
                    // 默认显示第一个角色的权限
                    if (this.allRole.length) {
                        this.currentRole = this.allRole[0];
                        this.changeRole(this.currentRole)
                    }
                }).catch()
            },
            // 获取所有权限及菜单
            getPermissionTree() {
                getPermissionTree().then(res => {
                    this.data = res || [];
                }).catch()
            },
            // 操作资源树
            handle(type) {
                switch (type) {
                    case 'add':
                        this.dialogParams = {
                            visible: true,
                            title: '新增资源',
                            type: type
                        };
                        break;
                    case 'save':
                        let menuIds = this.$refs.permission.getCheckedKeys();
                        let ids = [...menuIds];
                        ids = Array.from(new Set(ids));
                        if (!ids.length) {
                            this.$message.warning('请选择角色权限');
                            return
                        } else {
                            let params = {
                                roleId: this.currentRole.id,
                                resourcesIds: [...ids]
                            };
                            addRolePermission(params).then(res => {
                                this.$message.success('操作成功')
                            }).catch(() => {})
                        }
                        break;
                }
            },
            // 选择角色
            changeRole (role) {
                this.loading = false
                this.currentRole = role;
                this.getRolePermission(role.id);
            },
            // 获取角色相关权限
            getRolePermission (id) {
                let params = {
                    // pageIndex:1,
                    // pageSize: 100,
                    roleId: id
                };
                getRolePermission(params).then(res => {
                    this.loading = true
                    let temp = res.dataList || [];
                    if (temp && temp.length) {
                        this.selectArr = temp.map(item => item.resourcesId)
                    } else {
                        this.selectArr = []
                    }
                    this.$nextTick(() => {
                        if(this.$refs.permission){
                            this.$refs.permission.setCheckedKeys(this.selectArr);
                            this.changeCss()
                        }
                    })
                    }).catch()
            },
            renderContent(h, { node, data, store }) {
                if (node.isLeaf && data.type == 2) {
                    return (<span class="custom-handle">{node.label}</span>);
                }
                return (<span>{node.label}</span>);

            },
            changeCss() {
                this.$nextTick(() => {
                    var levelName = document.getElementsByClassName('custom-handle');
                    for (var i = 0; i < levelName.length; i++) {
                        let outNode = levelName[i].parentNode.parentNode.parentNode
                        let menuNode = levelName[i].parentNode.parentNode;
                        let parentNode = levelName[i].parentNode;
                        menuNode.style.cssFloat = 'left';
                        menuNode.style.styleFloat = 'left';
                        parentNode.style.paddingLeft = '0'
                        parentNode.style.borderBottom = '0'
                        outNode.style.paddingLeft = '220px'
                    }
                    var clearFloat = document.getElementsByClassName('custom-handle');
                    for (var i = 0; i < clearFloat.length; i++) {
                        let parentNode = clearFloat[i].parentNode;
                        parentNode.style.clear = 'both';
                        parentNode.style.clear = 'both';
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .permission {
        display: flex;
        .roles-left {
            width: 160px;
            border: 1px solid $lineColor;
            li, div {
                width: 100%;
                line-height: 40px;
                padding: 0 20px;
                box-sizing: border-box;
            }
            li {
                cursor: pointer;
                border: 1px dashed $lineColor;
                &:hover {
                    background: $lineColor;
                }
            }
            .title {
                font-size: 14px;
                font-weight: 600;
                color: $white;
                background: $blue;
                padding-left: 10px;
            }
            li.active {
                background: $green;
                color: #fff;
                font-weight: 600;
            }
        }

        .permission-right {
            margin-left: 10px;
            width: calc(100% - 160px);
            border: 1px solid $lineColor;
            border-radius: 4px;

            .top {
                @include flex();
                padding: 5px 20px;
                border-bottom: 1px solid $lineColor;
                p {
                    color: $blue;
                    font-size: 16px;
                }
            }

            .content {
                .title {
                    line-height: 40px;
                    background-color: $grey;
                }
                li {
                    line-height: 30px;
                    margin-right: 20px;
                    border-bottom: 1px solid $lineColor;
                }
                .item {
                    line-height: 30px;
                }
                .one {
                    line-height: 30px;
                    border-bottom: 1px solid $lineColor;
                }
                .two li {
                    padding-left: 30px;
                }
                .three li {
                    padding-left: 60px;
                }
            }
        }
    }
</style>